<extend name="Layout::index"/>
<block name="title"><title>影厅管理</title></block>
<!--右内容区域-->
<block name="content">
    <div class="layout-content">
        <div class="top-nav" style="margin-left:72%;position: absolute;margin-top:2%;">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal4">添加影厅</button>
        </div>
        <div class="page-title">放映厅管理</div>

        <div class="content-top">
            <ul class="top-nav">
                <li class="active"><span>放映厅列表</span></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--content-main start-->
        <div class="container-fluid content-main">
            <div class="row">
                <div class="col-md-12">
                    </form>
                    <table class="table table-hover mt15">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <notempty name="rooms">
                            <foreach name="rooms" item="val">
                                <tr class="pages">
                                    <th>
                                        {$val.id}
                                    </th>
                                    <th>
                                        {$val.name}
                                    </th>
                                    <th>
                                        <a href="{:U('Room/update',['id'=>$val['id'],'name'=>$val['name']])}">修改</a>
                                    </th>
                                </tr>
                            </foreach>
                        <else />
                            <tr>
                                <th colspan="3">没有影厅请添加</th>
                            </tr>
                        </notempty>
                        </tbody>
                    </table>
                    <div class="pull-right">
                                 <span class="pagination">
                                        {$page}
                                 </span>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!--content-main end-->
    </div>
    <!--右侧内容结束-->
    <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Photo</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal js-form1" action="" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">影厅名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control"  name="name">
                            </div>
                            <div class="modal-body">
                                <!--<span class="annotation">
                                    *注：如果您的放映厅没有缺失的座位，请直接提交
                                </span>-->
                                <div class="form-group">
                                        <label class="col-sm-2 control-label as">排</label>
                                        <select name="row" class="form-control row-select" data-row="1">
                                            <?php  for($i=1;$i<30;$i++){ echo '<option value="'.$i.'">',$i.'排</option>';} ?>
                                        </select>

                                        <label class="col-sm-2 control-label as ">列</label>
                                        <select name="col" class="row-select col-select form-control" data-row="2" id="js_td">
                                            <?php  for($s=1;$s<30;$s++){ echo '<option value="'.$s.'">',$s.'列</option>';} ?>
                                        </select><br>
                                        <span class="red"><span style="color: red">*注</span>: 请先选择排再选择列。</span>
                                    </form>

                                    <div class="row-table">
                                        <table cellspacing="0" class="tables">
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default ss js-submit">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
/*
       var forr = $('.row-select').val();
       var forc = $('.col-select').val();*/
$(function () {
        var num=0;
        var str=[];
        var str1=[];                //change()  数据发生改变的时候
       $('form').find('[data-row=1]').change(function () {
/*        alert($(this).val());
//           num = $(this).val();*/
           $('.tables').empty();
           for(var i=1;i<=$(this).val();i++){
                str[i]=$('<tr data-row='+i+'></tr>');
               str[i].appendTo($('.tables'));
           }
       });



    $('form').find('[data-row=2]').change(function () {
//        alert($(this).val());
        $('.tables tr').empty();
        $('.row-table span').empty();
            for(var j=1;j<=$(this).val();j++){

                str1[j]=$('<td class="imgs" data-col='+j+' determine="0"></td>');
                str1[j].appendTo($('.tables tr'));
            }
        var span = $('<span class="red"><span style="color: red">注释</span>: 请选择缺失座位的部位，如没有请直接提交。</span>');
        span.appendTo($('.row-table'));


        //实现css的 hover样式 使用匿名函数
        $('td').hover(function(){
            //把他原本的css属性储存起来
             $(this).data('class',$(this).attr('imgs')).addClass('hove');
            //如果已经被选中了 hover 事件则不正出现
            if($(this).attr('row-col')!=null){
                $(this).removeClass('hove');
               return false;
            }
        },function(){
            //把他储存的css  属性来过来
            $(this).attr('class',$(this).data('class')).removeClass('hove');
        });

        //点击选中事件
        $('td').click(function (){
           var col= $(this).attr('data-col');
           var row= $(this).parent().attr('data-row');
            if($(this).attr('row-col')!=null){
                $(this).removeClass('out');
                $(this).attr('row-col',null). attr('determine','0');

            }else{
                $(this).removeClass('hove').addClass('out').attr('row-col',row+'-'+col).attr('determine','1');

            }
        })

        $(function(){
            $('.js-submit').click(function(){

                //获取表单名的内容
                var formlist = $('.js-form1').serialize();

                //声明一个数组
                var arr= new Array();
                //获取 图片属性 at=2  /代表 选中了
                var ats = $(".imgs[determine='1']");

                //遍历选中的座位
                for(var m=0;m<ats.length;m++) {
                    // 拼接 坐标 把他压入数组中
                    arr.push($(ats[m]).attr('row-col'));
                }
                $.ajax({
                    type:'post',
                    url:"{:U('Room/addroom')}",
                    data:{'name':formlist,'row-col':arr},
                    datatype:'json',
                    success:function(data){
                        if(data ==1){
                            pFinal.toast("操作成功", function () {
                                window.location.href="";
                            });
                        }
                    },
                });
            })
        })



    })




})
    </script>
</block>

